<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, defineProps } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  days: {
    type: Number,
    default: 7
  }
})

const chartRef = ref(null)
let chart = null

// 完整的15天数据
const fullData = {
  days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
  values: [7.09, 7.18, 7.96, 8.71, 7.68, 7.2, 6.49, 7.1, 7.47, 6.61, 5.91, 7.03, 8.19, 6.33, 8.42]
}

// 根据选择的天数过滤数据
const getFilteredData = (days) => {
  return {
    days: fullData.days.slice(0, days),
    values: fullData.values.slice(0, days)
  }
}

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return

  chart = echarts.init(chartRef.value)
  updateChart()
}

// 更新图表数据
const updateChart = () => {
  if (!chart) return

  const data = getFilteredData(props.days)
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(15, 19, 37, 0.8)',
      borderColor: '#00c2ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: (params) => {
        const [param] = params
        return `第${param.name}天<br/>DO含量：${param.value} mg/L`
      }
    },
    xAxis: {
      type: 'category',
      data: data.days,
      axisLine: {
        lineStyle: {
          color: '#00c2ff'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      name: '天数',
      nameTextStyle: {
        color: '#00c2ff'
      }
    },
    yAxis: {
      type: 'value',
      name: 'DO含量 (mg/L)',
      nameTextStyle: {
        color: '#00c2ff'
      },
      axisLine: {
        lineStyle: {
          color: '#00c2ff'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 194, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: 'DO含量',
        type: 'line',
        data: data.values,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#00c2ff'
        },
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#00c2ff'
            },
            {
              offset: 1,
              color: '#0082ff'
            }
          ])
        },
        areaStyle: {
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 194, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(0, 194, 255, 0.1)'
            }
          ])
        }
      }
    ]
  }

  chart.setOption(option)
}

// 监听天数变化
watch(() => props.days, () => {
  updateChart()
})

// 监听窗口大小变化
const handleResize = () => {
  chart?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chart?.dispose()
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 